<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Long Polling Test</title>
    <style>
        button {
            margin: 10px;
        }
    </style>
</head>
<body>
<button id="requestFriendBtn">添加好友</button>
<button id="longPollingBtn">长轮询</button>
<div id="result"></div>

<script>
    const requestFriendBtn = document.getElementById('requestFriendBtn');
    const longPollingBtn = document.getElementById('longPollingBtn');
    const resultDiv = document.getElementById('result');

    const baseUrl = 'http://localhost:8101';
    // 假设这是从登录或其他方式获取的 token
    const token = 'eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MjI3ODU2NDEsInVzZXJJZCI6MSwiaWF0IjoxNzIyNzc0ODQxLCJqdGkiOiIxIn0.jwssXhtnmtFD6Z9cAf6FdvTqMQKhbbCLNBTVPTMI9LU';

    // 添加好友按钮点击事件
    requestFriendBtn.addEventListener('click', () => {
        const params = new URLSearchParams({ // 使用 URLSearchParams
            receiverId: 1 // 假设的接收者 ID
        });
        fetch(baseUrl + `/user/request-friend?${params.toString()}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'token': token
            },
            // 设置query参数
            body: new URLSearchParams({ // 使用 URLSearchParams
                receiverId: 1 // 假设的接收者 ID
            })
        })
            .then(response => response.json())
            .then(data => {
                console.log('添加好友请求成功:', data);
                resultDiv.textContent = '添加好友请求成功';
            })
            .catch(error => {
                console.error('添加好友请求失败:', error);
                resultDiv.textContent = '添加好友请求失败';
            });
    });

    // 长轮询按钮点击事件
    longPollingBtn.addEventListener('click', () => {
        fetch(baseUrl + '/user/get-friend-request', {
            method: 'GET',
            headers: {
                'token': token
            }
        })
            .then(response => response.json())
            .then(data => {
                console.log('长轮询结果:', data);
                resultDiv.textContent = `长轮询结果: ${JSON.stringify(data)}`;
            })
            .catch(error => {
                console.error('长轮询请求失败:', error);
                resultDiv.textContent = '长轮询请求失败';
            });
    });
</script>
</body>
</html>
